<template>
	<view class="article-detail-container">
		<!-- 标题 -->
		<view class="article-detail-title">{{ articleData.title }}</view>
		<!-- 作者信息 -->
		<view class="article-detail-user">
			<view class="user-logo">
				<image :src="articleData.author.avatar" mode="aspectFill"></image>
			</view>
			<view class="user-content">
				<view class="user-content-name">
					{{ articleData.author.author_name }}
				</view>
				<view class="user-content-info">
					<text>{{ articleData.create_time }}</text>
					<text>{{ articleData.browse_count }} 浏览</text>
					<text>{{ articleData.thumbs_up_count }} 赞</text>
				</view>
			</view>
			<button type="default" class="user-follow-but"
				@click="articleAuthorFollow">{{isFollowAuthor ? "取消关注" : "关注"}}</button>
		</view>
		<!-- 文章内容 -->
		<view class="article-detail-content">
			<view class="detail-html">
				<u-parse :content="contentHTML" noData="等待加载中..."></u-parse>
			</view>
		</view>
		<!-- 评论 -->
		<view class="article-detail-comment">
			<view class="comment-title">
				<text>最新评论</text>
				<text class="comment-count">{{articleData.comments_count}} 评论</text>
			</view>
			<view v-if="commentList.length" v-for="item in commentList" class="comment-content-container"
				:key="item.comment_id">
				<CommentBox :commentData="item" @commentReply="commentReply"></CommentBox>
			</view>
			<view class="comment-now" v-else>
				暂无评论，快来发表你的看法吧！
			</view>
		</view>
		<view class="article-detail-inputBox">
			<InputBox :item='articleData._id' @openMaskerComment="openMaskerComment" @thumbsCount="thumbsCount">
			</InputBox>
		</view>
		<CommentMasker :showPopup="showPopup" @cancle="hadnleCancle" @sendComment="sendComment"></CommentMasker>
	</view>
</template>

<script>
	import {
		marked
	} from "marked";
	import uParse from "@/components/u-parse/u-parse.vue";
	export default {
		onLoad(...options) {

			//获取标题，作者信息
			this.articleData = this.$Route.query;

			//获取文章详情
			this.get_articleDetail();
			//获取评论
			this.get_commentList()
		},
		components: {
			uParse,
		},
		data() {
			return {
				articleData: null,
				showPopup: false,
				commentList: [],
				replyData: {},
			};
		},
		computed: {
			//文章文本
			contentHTML() {
				try {
					return marked(this.articleData.content);
				} catch (err) {
					return null;
				}
			},
			//是否关注文章作者
			isFollowAuthor() {
				try {
					return this.userInfo && this.userInfo.author_likes_ids.includes(this.articleData.author.id)
				} catch (e) {
					return false
				}

			}
		},
		methods: {
			//获取文章内容
			async get_articleDetail() {
				const res = await this.$http.get_article_detail({
					id: this.articleData._id,
				});
				this.articleData = res;
			},
			//点击评论输入框
			async openMaskerComment() {
				await this.checkedisLogin()
				this.showPopup = true
			},
			//取消输入
			hadnleCancle(event) {
				this.showPopup = event;
				//避免取消后用户评论id重复，需要重新获取评论列表
				this.get_commentList()
			},
			//发送评论内容
			async sendComment(data) {
				await this.$http.updata_comment_data({
					userId: this.userInfo._id,
					articleId: this.articleData._id,
					commentData: data,
					...this.replyData
				})
				uni.showToast({
					title: "评论发布成功",
					icon: "success"
				})

				this.showPopup = false
				this.replyData = {}
				this.articleData.comments_count = this.articleData.comments_count + 1;
				this.get_commentList()
			},
			//获取评论
			async get_commentList() {
				const listArr = await this.$http.get_comment_list({
					articleId: this.articleData._id
				})
				this.commentList = listArr
			},
			//评论回复处理
			commentReply(data) {
				this.replyData = {
					comment_id: data.comment.comment_id,
					is_reply: data.isReply
				}
				data.comment.reply_id && (this.replyData.reply_id = data.comment.reply_id)
				this.openMaskerComment()

			},
			//关注/取消关注 文章作者
			async articleAuthorFollow() {
				await this.checkedisLogin()
				const {
					msg
				} = await this.$http.updata_follow_author({
					authorId: this.articleData.author.id,
					userId: this.userInfo._id
				})
				uni.showToast({
					title: msg,
					icon: "none"
				})
				//改变用户存储数据
				let followIds = [...this.userInfo.author_likes_ids]
				if (followIds.includes(this.articleData.author.id)) {
					//取消关注
					followIds = followIds.filter(item => item !== this.articleData.author.id)
				} else {
					//关注
					followIds.push(this.articleData.author.id)
				}
				//更改储存数据
				this.updetaUserInfo({
					...this.userInfo,
					author_likes_ids: followIds
				})
				uni.$emit('updataFollowAuthor')
			},
			//点赞数量修改
			thumbsCount(event) {
				if (event === 'add') {
					this.articleData.thumbs_up_count += 1
				} else if (event === 'sub') {
					this.articleData.thumbs_up_count -= 1
				}
			}
		},
	};
</script>

<style lang="scss" scoped>
	@import "css/articleDetail.scss";
</style>
